<template>
  <div>
  <city-header></city-header>
  <city-search></city-search>
  <city-list :hot="hotCity" :city="cities" :letter="letter"></city-list>
    <!--在City组件里面监听change事件-->
  <city-alphabet :city="cities" @change="handleLetterChange"></city-alphabet>
  </div>
</template>

<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
import axios from 'axios'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data () {
    return {
      letter: '',
      hotCity: [],
      cities: {}
    }
  },
  mounted () {
    this.getCityInfo()
  },
  methods: {
    getCityInfo: function () {
      axios.get('/api/city.json')
        .then(this.getCityInfoSucc)
    },
    getCityInfoSucc: function (res) {
      res = res.data
      console.log(res)
      if (res.ret && res.data) {
        /* 将axios返回来的数据res.data.hotCities赋值给data里面的hotCity */
        /* 在city.json文件里面的hotCities为数组，则data里面的hotCity也使用数组来存放数据 */
        this.hotCity = res.data.hotCities
        this.cities = res.data.cities
      }
    },
    /* 此处的letter就是Alphabet传递过来的数值，即e.target.innerText,只不过换了一个代名词 */
    handleLetterChange (letter) {
      /* 随之有将传递过来的值传入data定义的letter当中 */
      this.letter = letter
      /* console.log(letter) */
    }
  }
}
</script>

<style scoped>

</style>
